{% extends "base.html" %}

{% block content %}
<h3 class="mb-4">Todo Create</h3>
<div class="row">
  <form class="col s12" action="/add" method="post">
    <div class="row">
      <div class="input-field col s12">
        <input id="input_text" type="text" class="validate" name="task" data-length="128">
        <label for="input_text">Task</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="textarea1" class="materialize-textarea" name="description" data-length="512"></textarea>
        <label for="textarea1">Task Description</label>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s12">
        <select name="privilege">
          <option value="" disabled selected>Pick Privilege</option>
          <option value="Low">Low</option>
          <option value="Mid">Mid</option>
          <option value="High">High</option>
        </select>
        <label>Privilege</label>
      </div>
    </div>

    <div class="row">
      <button class="btn waves-effect waves-light" type="submit" name="action">
        submit
      </button>
    </div>

  </form>
</div>




{% endblock %}

{% block scripts %}
<script>
  $(document).ready(function () {
    $('input#input_text, textarea#textarea1').characterCounter();
  });
  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });
  $(document).ready(function () {
    $('select').formSelect();
  });
</script>
{% endblock %}